<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="HandheldFriendly" content="true" />
    <title>Bitwarden WebAuthn Connector</title>
  </head>

  <body class="tw-bg-transparent">
    <div class="tw-flex tw-mt-5 tw-flex-col tw-items-center">
      <img src="../images/logo-dark@2x.png" class="logo tw-mb-2" alt="Bitwarden" />
      <p id="webauthn-header" class="tw-text-center tw-mx-4 tw-mb-4 tw-text-xl"></p>
      <picture>
        <source srcset="../images/u2fkey-mobile.avif" type="image/avif" />
        <source srcset="../images/u2fkey-mobile.webp" type="image/webp" />
        <img src="../images/u2fkey-mobile.jpg" class="tw-rounded tw-max-w-full tw-h-auto" />
      </picture>
      <div class="tw-text-center tw-mt-4">
        <button
          type="button"
          id="webauthn-button"
          class="tw-cursor-pointer tw-bg-primary-600 tw-border-transparent tw-px-4 tw-py-2 tw-rounded-md hover:tw-bg-primary-700 tw-transition-colors tw-font-medium tw-text-contrast tw-text-lg"
        ></button>
      </div>
    </div>
  </body>
</html>
